<template>
  <el-dialog
    title="选择产品"
    :visible.sync="dialogVisible"
    width="50%"
  >
    <div class="app-container">
      <el-form :model="form" ref="form" :inline="true">
        <el-form-item label="产品名称" prop="productName">
          <el-input v-model="form.productName" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <el-tabs v-model="tabIndex" @tab-click="changTab" v-if="flag==0">
        <el-tab-pane label="商品" name="0"></el-tab-pane>
        <el-tab-pane label="配件" name="1"></el-tab-pane>
        <el-tab-pane label="物料" name="2"></el-tab-pane>
      </el-tabs>
      <el-table
        v-loading="loading"
        :data="list"
      >
        <el-table-column type="index" label="序号" align="center">
          <template slot-scope="scope">
            <span>{{ (form.pageNum - 1) * form.pageSize + scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="productName" label="产品信息" align="center">
          <template slot-scope="scope">
            <div>
              <div>{{ scope.row.product.productName }}</div>
              <div>品牌：{{ scope.row.product.brandName }}</div>
              <div>分类：{{ scope.row.product.productCategoryName }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="skuName" label="商品规格" align="center">
          <template slot-scope="scope">
            <div>
              <div>{{ scope.row.productSku.skuName }}</div>
              <div>编号：{{ scope.row.productSku.skuCode }}</div>
              <div>条码：{{ scope.row.productSku.barcode }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="purchase" label="采购价" align="center">
          <template slot-scope="scope">
            <div>{{ scope.row.productSku.purchase }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="costPrice" label="成本价" align="center">
          <template slot-scope="scope">
            <div>{{ scope.row.productSku.costPrice }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="price" label="零售价" align="center">
          <template slot-scope="scope">
            <div>{{ scope.row.productSku.price }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="minPrice" label="最低零售价" align="center">
          <template slot-scope="scope">
            <div>{{ scope.row.productSku.minPrice }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="100">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="updateRow(scope.row)"
            >选择
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination :total="total" :page.sync="form.pageNum" :limit.sync="form.pageSize" @pagination="getList"/>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
    </span>
  </el-dialog>

</template>

<script>
import {listGood, listGoodType,listStoreStock} from "@/api/imsMng";

export default {
  name: 'Good',
  data() {
    return {
      loading: false,
      dialogVisible: false,
      flag: 0,//0入库，1出库
      tabIndex: 0,
      selectList: [],
      list: [],
      form: {
        productName: '',
        pageNum: 1,
        pageSize: 10
      },
      total: 0,
      goodTypeList: [],
    }
  },
  methods: {
    show(flag) {
      this.flag=flag
      this.tabIndex = 0
      this.dialogVisible = true
      this.load()
    },
    load() {
      this.handleQuery()
      listGoodType().then(res => {
        this.goodTypeList = res.data
      })
    },
    changTab(e) {
      this.tabIndex = e.index
      this.handleQuery()
    },
    handleQuery() {
      this.form.pageNum = 1
      this.getList()
    },
    resetQuery() {
      this.resetForm('form')
      this.handleQuery()
    },
    getList() {
      this.loading = true
      if (this.flag == 0) {
        this.form.productType = Number(this.tabIndex) + 1
        listGood(this.form).then(res => {
          this.list = res.rows
          this.total = res.total
        }).finally(e => {
          this.loading = false
        })
      }
      if (this.flag == 1) {
        this.form.minQuantity = 1
        listStoreStock(this.form).then(res => {
          this.list = res.rows
          this.total = res.total
        }).finally(e => {
          this.loading = false
        })
      }
    },
    updateRow(row) {
      this.$emit('ok', row)
      this.dialogVisible = false
    }
  }
}
</script>
<style scoped>
.imgDiv {
  width: 200px;
  height: 200px;
  border: 1px dashed #999;
  padding: 10px;
  border-radius: 10px;
  display: inline-block;
  margin: 10px 50px;
  cursor: pointer;

}

.imgDiv:hover {
  transform: scale(1.1);
}

.textDiv {
  width: 190px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 10px;
}
</style>
